<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户注册</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 500px;
            margin: 0 auto;
            padding: 20px;
        }
        .form-group {
            margin-bottom: 15px;
        }
        label {
            display: block;
            margin-bottom: 5px;
        }
        input {
            width: 30px
            padding: 8px;
           
        }
        .error {
            color: red;
            font-size: 0.9em;
            display: none;
        }
        .error.active {
            display: block;
        }
 
    </style>
</head>
<body>
   
    <form id="registrationForm">
        <div class="form-group">
            <label for="name">输入姓名</label>
            <input type="text" id="name" onclick="error1" >
			<span id="error11"></span>
        </div>
        
        <div class="form-group">
            <label for="age">输入年龄</label>
            <input type="text" id="age" onclick="error2">
			<span id="error22"></span>
        </div>
        
        <div class="form-group">
            <label for="password">输入密码</label>
            <input type="password" id="password" onclick="error3" >
			<span id="error33"></span>
        </div>
        
        <div class="form-group">
            <label for="confirmPassword">确认密码</label>
            <input type="password" id="confirmPassword" onclick="error4" >
			<span id="error44"></span>
        </div>
        
        <div class="form-group">
            <label for="phone">手机号码</label>
            <input type="text" id="phone" onclick="error5" > 
			<span id="error55"></span>
        </div>
        
        <button type="button" onclick="valid()">注册</button>
    </form>
    
    <div id="message"></div>
    
    <script>
		function valid(){
			const name = document.getElementById('name').value
			const age = document.getElementById('age').value
			const password = document.getElementById('password').value
			const confirmPassword = document.getElementById('confirmPassword').value
			const phone = document.getElementById('phone').value;
			let isValid;
        function error1(name){
			isValid=true
			if(name.length>10||name.trim()==""){
				document.getElementById("error11").innerHTML="姓名不能超过10个字"
				isValid=false
			}
			if(isValid){
				document.getElementById("error11").innerHTML=''
				let df=document.createDocumentFragment()
				let text= document.createElement("img")
				text.setAttribute("src","../src/ok.png")
				df.appendChild(text)
				document.getElementById("error11").appendChild(df)
			}
			}
			function error2(age){
				isValid=true
				if(age<1||age>150){
					document.getElementById("error22").innerHTML="年龄必须在1到150之间"
					isValid=false
				}
				if(isValid){
					document.getElementById("error22").innerHTML=''
					let df=document.createDocumentFragment()
					let text= document.createElement("img")
					text.setAttribute("src","../src/ok.png")
					df.appendChild(text)
					document.getElementById("error22").appendChild(df)
				}
				}
           
			   function error3(password){
				isValid=true
				if(password.length<6){
					document.getElementById("error33").innerHTML="密码不能小于6位"
					isValid=false
				}
				if(isValid){
					document.getElementById("error33").innerHTML=""
					let df=document.createDocumentFragment()
					let text= document.createElement("img")
					text.setAttribute("src","../src/ok.png")
					df.appendChild(text)
					document.getElementById("error33").appendChild(df)
				}
				}
				
				function error4(confirmPassword){
					isValid=true
					if(password!=confirmPassword||confirmPassword.trim()==""){
						document.getElementById("error44").innerHTML="密码不一致或者不能为空"
						isValid=false
					}
					if(isValid){
						document.getElementById("error44").innerHTML=""
						let df=document.createDocumentFragment()
						let text= document.createElement("img")
						text.setAttribute("src","../src/ok.png")
						df.appendChild(text)
						document.getElementById("error44").appendChild(df)
					}
				}
					function error5(phone){
						isValid=true
						let reg=/^1\d{10}$/
						if(!reg.test(phone)){
							document.getElementById("error55").innerHTML="密码必须是11位的"
							isValid=false
						}
					
						if(isValid){
							document.getElementById("error55").innerHTML=""
							let df=document.createDocumentFragment()
							let text= document.createElement("img")
							text.setAttribute("src","../src/ok.png")
							df.appendChild(text)
							document.getElementById("error55").appendChild(df)
						}
						}
            document.getElementById("name").textContent=error1(name)
			document.getElementById("age").textContent=error2(age)
			document.getElementById("password").textContent=error3(password)
			document.getElementById("confirmPassword").textContent=error4(confirmPassword)
			document.getElementById("phone").textContent=error5(phone)
            // 显示结果消息
            
            if (isValid) {
                document.getElementById("message").innerHTML="注册成功"}
            // } else {
            //     document.getElementById("message").innerHTML = '请根据提示修改数据';
            // }
       };
    </script>
</body>
</html>
